<template>
  <div style="width: 100%; height: 100%">
    <div
      class="content"
      v-infinite-scroll="loadMore"
      infinite-scroll-disabled="loading"
      infinite-scroll-distance="10"
    >
      <div class="left" v-if="list.length">
        <ul>
          <li
            v-for="(item, i) in list"
            :key="item.cat_id"
            :class="{ active: index == i }"
            @click="changeIndex(item.cat_id, i)"
          >
            <p>{{ item.cat_name }}</p>
          </li>
        </ul>
      </div>

      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="right" v-if="listOne.length">
          <div class="ad-img">
            <img :src="list[index].touch_catads" alt="" />
          </div>
          <div v-for="item in listOne" :key="item.cat_id" class="ad-item">
            <div class="tit">
              <p>{{ item.cat_name }}</p>
              <i></i>
            </div>
            <div class="cont">
              <div
                class="cont-item"
                v-for="value in item.child"
                :key="value.cat_id"
                @click="goList(value.cat_id, value.cat_name)"
              >
                <img :src="value.touch_icon" alt="" />
                <p>{{ value.cat_name }}</p>
              </div>
            </div>
          </div>
        </div>
        <template #loosing>
          <div>松开加载</div>
        </template>
        <template #loading>
          <div>加载中</div>
        </template>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
// import list from "@/mock/list.json";
// import chufang from "@/mock/chufang.json";
import { getCategoryData, getCategoryList } from "@/api/category";
import { Indicator } from "mint-ui";
export default {
  data() {
    return {
      cartList: [
        {
          ru_id: 0,
          shop_name: "商创自营",
          flag: true,
          goods: [
            {
              goods_id: "1278",
              goods_name: "测试",
              goods_thumb:
                "https://x.dscmall.cn/storage/images/202201/thumb_img/1279_copy_0_thumb_G_1642458971157.jpg",
            },
          ],
        },
      ],
      list: [],
      index: 0,
      listOne: [],
      catId: 858,
      isLoading: false,
    };
  },
  created() {
    this.getList();
    this.getData();
  },
  methods: {
    onRefresh() {
      if (this.listOne) {
        if (this.index > 0) {
          this.index--;
          this.catId = this.list[this.index].cat_id;
          window.scrollTo(0, 0);
          this.getData();
        }
      }
      setTimeout(() => {
        this.isLoading = false;
      }, 1000);
    },
    goList(id, title) {
      this.$router.push({
        name: "list",
        query: {
          title,
        },
        params: {
          id,
        },
      });
    },
    getList() {
      getCategoryList().then((res) => {
        console.log(res);
        this.list = res.data.data;
      });
    },
    getData() {
      Indicator.open({
        text: "加载中...",
        spinnerType: "fading-circle",
      });
      getCategoryData(this.catId).then((res) => {
        console.log(res);
        this.listOne = res.data.data;
        Indicator.close();
      });
    },
    changeIndex(id, index) {
      this.index = index;
      this.catId = id;
      this.getData();
    },
    loadMore() {
      console.log("123123");
      if (this.listOne) {
        if (this.index < this.list.length - 1) {
          this.index++;
          this.catId = this.list[this.index].cat_id;
          window.scrollTo(0, 0);
          this.getData();
        }
      }
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  width: 100%;
  // height: calc(100% - 4.4rem - 4.9rem);
  min-height: 100vh;
  position: absolute;
  top: 4.4rem;
  left: 0;
  background-color: #fff;
  display: flex;
  .left {
    width: 8.5rem;
    background-color: #f4f4f4;
    position: relative;

    ul {
      position: fixed;
      width: 8.5rem;
      li {
        height: 3.8rem;
        width: 100%;
        font-size: 1.3rem;
        color: #999;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .active {
        color: red;
        background-color: #fff;
        p {
          border-left: 2px solid red;
          box-sizing: border-box;
          width: 100%;
          height: 2rem;
        }
      }
    }
  }
  .right {
    padding: 1rem;
    box-sizing: border-box;
    flex: 1;
    .ad-img {
      img {
        width: 27rem;
        height: 9rem;
      }
    }
    .ad-item {
      text-align: center;
      .tit {
        height: 2.5rem;
        line-height: 2.5rem;
        margin: 1.1rem 0;
        font-size: 1.3rem;
        position: relative;
        p {
          position: relative;
          z-index: 5;
        }
        i {
          position: absolute;
          display: inline-block;
          width: 6rem;
          height: 1px;
          background-color: #ccc;
          top: 12px;
          left: calc(50% - 3rem);
          z-index: 0;
        }
      }
      .cont {
        width: 100%;
        flex-wrap: wrap;
        display: flex;
        .cont-item {
          width: 33.3%;
          margin-bottom: 2rem;
          img {
            width: 5.2rem;
          }
        }
      }
    }
  }
}
/deep/ .van-pull-refresh {
  flex: 1;
}
</style>